<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>云盘容量统计</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 95%"></div>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">

    var chartDom = document.getElementById('container');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        series: [{
            type: 'gauge',
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#67e0e3'],
                        [0.7, '#37a2da'],
                        [1, '#fd666d']
                    ]
                }
            },
            pointer: {
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                    color: '#fff',
                    width: 4
                }
            },
            axisLabel: {
                color: 'auto',
                distance: 40,
                fontSize: 20
            },
            detail: {
                valueAnimation: true,
                formatter: '{value} GB',
                color: 'auto'
            },
            data: [{
                value: 70
            }]
        }]
    };

    option && myChart.setOption(option);


    //云盘容量统计
    spaceCloud();

    /**
     * 云盘容量统计
     */
    function spaceCloud() {
        $.ajax({
            url : 'cloud-space/cloud',
            type : 'get',
            dataType : 'json',
            success: function (result) {
                if (result.code == 200) {
                    let data = result.data;
                    option.series[0].data[0].value = data;
                    myChart.setOption(option, true);
                }
            }
        });
    }

</script>
</body>
</html>